<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>测试界面</title>
    <link th:href="@{/webjars/layui/2.6.8/css/layui.css}" rel="stylesheet" type="text/css">
    <script th:src="@{/webjars/layui/2.6.8/layui.js}"></script>
    <style>
        body {
            width: 100%;
            height: 100%;
            background-image: url(/image/k.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        .layui-container {
            margin-left: 200px;
        }

        li {
            height: 80px;
            width: 700px;
        }

        #answerList {
            width: 800px;
            height: 200px;
        }

        #choose {
            font-family: 楷体;
            color: #00FFFF;
            margin-top: 20px;
            font-size: 20px;
            margin-bottom: 10px;
        }

        .option {
            font-size: 18px;
            color: #070707;
        }

        .question {
            margin-top: 40px;
            font-size: 25px;
            color: #00FFFF;
        }

        .radio1 {
            height: 18px;
            width: 18px;
            margin-right: 15px;
        }
    </style>
</head>
<body>
<h1>version-1.0测试页面</h1>
<div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="demo">
    <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
</div>
<div class="layui-container">
    <ul>
        <li class="question"><strong>第<span id="questionNum">1</span>题</strong><span id="question"></span></li>
        <li><input type="radio" name="option" value="A" class="radio1" id="radioA"><label for="radioA"><span id="optionA" class="option"></span></label> </li>
        <li><input type="radio" name="option" value="B" class="radio1" id="radioB"><label for="radioB"><span id="optionB" class="option"></span></label></li>
        <li><input type="radio" name="option" value="C" class="radio1" id="radioC"><label for="radioC"><span id="optionC" class="option"></span></label></li>
        <li><input type="radio" name="option" value="D" class="radio1" id="radioD"><label for="radioD"><span id="optionD" class="option"></span></label></li>
    </ul>
    <button id="preQuestion" class="layui-btn layui-btn-sm layui-btn-normal">上一题</button>
    <button id="answerSubmit" class="layui-btn layui-btn-sm layui-btn-warm">提交</button>
    <button id="nextQuestion" class="layui-btn layui-btn-sm layui-btn-normal">下一题</button>

    <div id="choose">选项卡</div>
    <ul id="answerList">
    </ul>
</div>

</body>
<script type="text/javascript" th:inline="none">

    function gotoQuestion() {

    }
    layui.define(function () {
        var form = layui.form,
            $ = layui.$,
        element = layui.element,
        layer = layui.layer;
        var i = 0;
        var questionArr = [];
        var answerArr = [];
        $.ajax({
            url: "question/selectAll",
            async: false,
            success: function (obj) {
                fillValue(i + 1, obj.data[i].question, obj.data[i].optionA, obj.data[i].optionB, obj.data[i].optionC, obj.data[i].optionD)
                questionArr = obj.data;
            }
        });

        function fillValue(num, question, A, B, C, D) {
            $("#questionNum").html(num)
            $("#question").html(question)
            $("#optionA").html(A)
            $("#optionB").html(B)
            $("#optionC").html(C)
            $("#optionD").html(D)
        }
        let answer=0;

        /*记录答案*/
        function recordAnswer(i) {
            if ($('input[name="option"]:checked').val() != undefined) {
                answerArr[i] = $('input[name="option"]:checked').val();
                //设置50%进度
                for (let j = 0; j < answerArr.length; j++) {
                    if(answerArr[j]!= undefined){
                        answer++;
                    }
                }
                console.log(answer)
                element.progress('demo', (answer/questionArr.length)*100+'%')
                answer=0;
                $("#a" + (i + 1) + "").css("background-color", "yellow")
                /*记录之后把选中置为空*/
                $('input[name="option"]:checked').prop('checked', '');
            }
        }


        /*回显答案*/
        function showAnswer(i) {
            if (answerArr[i] != null) {
                $('input[value="' + answerArr[i] + '"]').prop('checked', 'checked');
            } else {
                $('input[name="option"]:checked').prop('checked', '');
            }
        }

        $("#nextQuestion").click(function () {
            if (i == questionArr.length - 1) {
                $("#nextQuestion").css('disabled', 'true');
                return;
            }
            /*记录选项的值*/
            recordAnswer(i);
            i = i + 1;
            /*回显*/
            showAnswer(i)
            fillValue(i + 1, questionArr[i].question, questionArr[i].optionA, questionArr[i].optionB, questionArr[i].optionC, questionArr[i].optionD);

        });
        /*提交*/
        $("#answerSubmit").click(function () {
            let flag = true;
            if(answerArr.length == 0){
                flag = false;
            }else{
                if(answerArr[questionArr.length-1] == undefined&&answerArr.length==(questionArr.length-1)){
                    recordAnswer(questionArr.length-1)
                }
                for (let j = 0; j < answerArr.length; j++) {
                    if(answerArr[j] == undefined){
                        flag = false;
                    }
                }
            }
            console.log(flag)
            if(flag){
                $.ajax({
                    url: "result/resultSubmit",
                    data: {'answerList': answerArr},
                    type: "POST",
                    success: function (obj) {
                        location.href = "toBack"
                    }
                })
            }else{
                layer.alert("题未做完")
            }
        })
        /*上一题*/
        $("#preQuestion").click(function () {
            if (i == 0) {
                $("#preQuestion").css('disabled', 'true');
                return;
            }
            recordAnswer(i)
            i = i - 1;
            showAnswer(i)
            fillValue(i + 1, questionArr[i].question, questionArr[i].optionA, questionArr[i].optionB, questionArr[i].optionC, questionArr[i].optionD);

        });
        //下面的选项卡跳转
        var goPreNum = i;
        gotoQuestion = function (obj) {
            i = obj.innerHTML - 1;
            recordAnswer(goPreNum);
            goPreNum = i;
            showAnswer(i);
            fillValue(i + 1, questionArr[i].question, questionArr[i].optionA, questionArr[i].optionB, questionArr[i].optionC, questionArr[i].optionD)
        }
        for (let j = 0; j < questionArr.length; j++) {
            let options = '';
            if ((j + 1) % 10 == 0) {
                options = '<li style="display: inline"><a href="javascript:void(0)" onclick="gotoQuestion(this)" id="a' + (j + 1) + '" style="width: 45px;height: 25px;background-color:lightgray; display: inline-block;margin: 5px;padding-top:20px;text-align: center">' + (j + 1) + '</a></div><br>'
                //options = '<li style="display: inline"><a href="javascript:void(0)" onclick="gotoQuestion(this)" id="a' + (j + 1) + '" class="show">' + (j + 1) + '</a></div><br>'

            } else {
                options = '<li style="display: inline"><a href="javascript:void(0)" onclick="gotoQuestion(this)" id="a' + (j + 1) + '"  style="width: 45px;height: 25px;background-color:lightgray; display: inline-block;margin: 5px;padding-top:20px;text-align: center">' + (j + 1) + '</a></div>'

            }
            $("#answerList").append(options)
        }

    });
</script>
</html>